<template>
    <div>
        <ul class="checklist-box clearfix">
            <li class="clearfix b-g-f checklist-box-li">
                <div class="checklist-score">
                    <span class="xiaoyu">＜</span>
                    <span class="score">3</span>
                    <span class="xiaoyu">分</span>
                </div>
                <div class="checklist-content">
                    <span class="checklist-title">营养不足</span>
                    <span class="checklist-nr">能量或/和蛋白质摄入不足或吸收障碍 造成特异性的营养缺乏症状。</span>
                </div>
                <span class="checklist-data">2019-5-10</span>
            </li>
        </ul>
    </div>
</template>
<style lang="less" scoped>
.checklist-box{
    margin: 30px 40px;
    .checklist-box-li{
        border-radius: 10px;
        padding: 40px;
        .checklist-score{
            color: #5CA1EE;
            font-size: 40px;
            height: 120px;
            line-height: 120px;
            text-align: center;
            overflow: hidden;
            .xiaoyu{
                display: inline-block;
            }
            .score{
                font-size: 80px;
                line-height: 120px;
                font-weight: bold;
                display: inline-block;
            }
        }
        .checklist-content{
            text-align: center;
            .checklist-title{
                height: 120px;
                display: block;
                font-size: 44px;
                font-weight: bold;
                line-height: 120px;
            }
            .checklist-nr{
                display: block;
                font-size: 38px;
                color: #666;
            }
        }
        .checklist-data{
            display: block;
            text-align: right;
            color: #999;
            height: 80px;
            line-height: 80px;
        }
    }
}
</style>
